<script setup lang="ts">
import { useDeatilStore } from '@/store';
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
let activeIndex=ref(0)
let detailStore=useDeatilStore()
const router=useRouter()
const route=useRoute()
const changeItem=(index:number)=>{
  activeIndex.value=index
  const allH1=document.querySelectorAll('.cur')
  console.log(allH1);
  allH1[activeIndex.value].scrollIntoView({
    behavior:'smooth',
    block:'start'
  })
}

</script>

<template>
  <div class="register">
    <div class="header">
      <span class="header_title">{{detailStore.detailList?.hospital.hosname}}</span>
      <div class="icon_content">
        <svg t="1727878202438" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5217" width="16" height="16"><path d="M853.3 874.7H170.7c-23.6 0-42.7-19.1-42.7-42.7s19.1-42.7 42.7-42.7h682.7c23.6 0 42.7 19.1 42.7 42.7-0.1 23.6-19.2 42.7-42.8 42.7zM298.7 661.3V192c0-23.6-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v469.3c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7z m256 0V320c0-23.6-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v341.3c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7z m256 0V448c0-23.6-19.1-42.7-42.7-42.7s-42.7 19.1-42.7 42.7v213.3c0 23.6 19.1 42.7 42.7 42.7s42.7-19.1 42.7-42.7z" p-id="5218" fill="#999999"></path></svg>
        <span>{{detailStore.detailList?.hospital.param.hostypeString}}</span>
      </div>
    </div>
    <div class="info">
      <img :src="`data:image/jpeg;base64,${detailStore.detailList?.hospital.logoData}`" alt="">
      <div class="content">
        <div>挂号规则</div>
        <div class="line">
          <div>
            <span class="label">预约周期:</span>
            <span>{{detailStore.detailList?.bookingRule.cycle}}天</span>
          </div>
          <div class="space">
            <span class="label">放号时间:</span>
            <span>{{detailStore.detailList?.bookingRule.releaseTime}}</span>
          </div>
          <div class="space">
            <span class="label">停挂时间:</span>
            <span>{{detailStore.detailList?.bookingRule.stopTime}}</span>
          </div>
        </div>
        <div class="line">
          <span class="label">退号时间:</span>
          <span>就诊前一天工作日{{detailStore.detailList?.bookingRule.quitTime }}前取消</span>
        </div>
        <div style="margin-top:20px;color: #333;">医院预约规则</div>
        <div class="rule">
          <ol>
            <li v-for="item in detailStore.detailList?.bookingRule.rule">{{ item }} </li>
          </ol>
        </div>
      </div>
    </div>
    <div class="select">选择科室</div>
    <div class="department">
      <div class="leftNav">
       <ul>
        <li :class="{active:activeIndex===index}" @click="changeItem(index)" v-for="(item,index) in detailStore.departmentList" :key="item.depcode">{{ item.depname }} </li>
       </ul>
      </div>
      <div class="departmentInfo">
        <div class="showDepartment" v-for="depart in detailStore.departmentList" :key="depart.depcode">
          <h2 class="cur">{{ depart.depname }} </h2>
          <div class="content">
            <span @click="router.push(`schedule?hoscode=${route.query.hoscode}&depcode=${item.depcode}`)" v-for="item in depart.children" :key="item.depcode">{{ item.depname }} </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.register {
  .header {
    display: flex;
    .header_title {
      color: #333;
      font-size: 20px;
      font-weight: 700;
      margin-right: 15px;
    }
    .icon_content {
      display: flex;
      align-items: center;
      svg {
        margin-right:3px ;
      }
      span {
        color: #999;
        font-size: 14px;
      }
    }
  }
  .info {
    display: flex;
    margin-top: 30px;
    img {
      width: 80px;
      height: 80px;
      border-radius: 50%;
    }
    .content {
      margin-left: 30px;
      padding-bottom: 30px;
      .line {
        display: flex;
        margin-top: 8px;
        font-size: 12px;
        .label {
          color: #999;
        }
        .space {
          margin-left: 60px;
        }
        span {
          color: #333;
        }
      }
      .rule {
        margin-top: 8px;
        color: #999;
        font-size: 12px;
        ol {
          display: flex;
        flex-direction: column;
        margin-left: 15px;
        list-style: decimal!important;
        li {
          height: 24px;
          line-height: 24px;
        }
        }
      }
    }
  }
  .select {
    color: #333;
    font-size: 16px;
    font-weight: 700;
    padding: 40px 0 20px 0;
  }
  .department {
    display: flex;
    width: 100%;
    height: 500px;
    .leftNav {
      width: 180px;
      height: 100%;
      ul {
        width: 100%;
        height: 100%;
        background-color: #f4f9ff;
        display: flex;
        flex-direction: column;
        li {
          flex: 1;
          text-align: center;
          color: #333;
          font-size: 14px;
          padding: 10px;
          cursor: pointer;
          &.active {
            background-color: #fff;
          font-weight: 700;
          }
        }
      }
    }
    .departmentInfo {
      flex: 1;
      margin-left: 50px;
      height: 100%;
      overflow: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .showDepartment {
        padding: 20px 0 20px 30px;
        h2 {
          color: #333;
          font-size: 16px;
          font-weight: 700;
        }
        .content {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          margin-top: 10px;
          span {
            width: 33%;
            color: #666;
            font-size: 14px;
            line-height: 30px;
            cursor: pointer;
          }
          span:hover {
            color: #4490f1;
          }
        }
      }
    }
  }
}
</style>